<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">外观模式开发</div>
  </body>
  <script>
    // 需求:处理浏览器对事件触发的兼容处理。

    var oBox = document.getElementById("box");
    /* // oBox.onclick = function(){
    //   console.log("这是onclick事件触发");
    // }
    oBox.addEventListener("click",function(){//IE9以下的版本不支持addEventListener
      console.log("这是事件监听处理");
    },false)

    // 事件处理的兼容写法
    console.log(oBox.addEventListener);
    //浏览器支持addEventListener时返回一个函数，在if条件判断时为true
    if(oBox.addEventListener){//IE9以上版本和其他浏览器
      oBox.addEventListener("click",function(){
        console.log("这是addEventListener");
      },false)
    }else if(oBox.attachEvent){ //IE9以下的版本事件监听用attachEvent
      oBox.attachEvent("onclick",function(){
        console.log("这是attachEvent");
      })
    } else{
      oBox.onclick = function(){//其他浏览器(通用浏览器)
        console.log("其他浏览器");
      }
    } */

    // 外观模式写法(将多个接口封装成一个接口)
    var addMyEvent = function (dom, event, fn) {
      if (dom.addEventListener) {
        dom.addEventListener(event, fn, false);
      } else if (dom.attachEvent) {
        dom.attachEvent("on" + event, fn);
      } else {
        dom["on" + event] = fn;
      }
    };

    addMyEvent(oBox, "click", function () {
      console.log("这是外观开发模式");
    });
    addMyEvent(oBox, "mouseover", function () {
      console.log("这是外观开发模式");
    });
  </script>
</html>
